<template>
	<view>
			<view :style="{height:`${systemBarHeight}px`}" style="border-bottom: 4px solid #f0f3f3;font-size: 16px;font-weight: bolder; display: flex;align-items: center;justify-content: space-between;padding: 0 20px;"><text>{{getUserinfo.SubjectName}}</text><text>考场:{{getUserinfo.ExaminationRoom}} | (考位:{{getUserinfo.SeatNo}})</text></view>
		<view class="hmain" 
			:style="{marginTop: 0, height:`calc(100vh - ${systemBarHeight+8}px)`}">
			<view
				style="flex:4;border-radius:1vw; background-color: #fff;overflow: hidden;margin-right: .5vw;position: relative;">
				<view
					style="font-size: 20px;text-align: center;margin-top: 10px;width: 100%;display: flex;justify-content: space-between;padding: 0 20px;box-sizing: border-box;">
					<view style="color: #5d9cec;font-weight: bolder;">考生信息</view>
					<view style="display: flex;align-items: center;width: 60px;justify-content: space-between;">
						<!-- <u-icon name="home" @click="Ibacklogin" color="red" size="26"></u-icon> -->
						<image @click="Ibacklogin()" src="../../static/home.png"  style="width: 24px;height: 24px;" mode=""></image>
<!-- 						<u-icon name="reload" @click="Agetuser()" color="#5d9cec" size="26"></u-icon> -->
							<image @click="Agetuser()" src="../../static/load.png"  style="width: 22px;height: 22px;" mode=""></image>
					</view>
				</view>
				<view v-if="getUserinfo.IdCardNo"
					style="width: 100%;display: flex; flex-direction: column;justify-content: center;height: 100%;">
					<view
						style="width: 100%;display: flex; flex-direction: column; align-items: center; font-weight: bolder;padding: 0 10px 60px; box-sizing: border-box;overflow-y: scroll; ">
<image :src="`http://${uni.getStorageSync('config').ip}:${uni.getStorageSync('config').port}/Files/Photos/${getUserinfo.IdCardNo}.jpg`" style="width: 8vw;margin: 10px 0;margin-bottom: 20px; flex-shrink: 0;" mode="widthFix"></image>
		
							<view style="width: 100%;flex-wrap: wrap; margin-bottom: 10px;font-size: 1.8vw;color: #5d9cec;">个人信息:
							</view>
							<view style="width: 100%;flex-wrap: wrap; margin-bottom: 10px;font-size: 1.6vw;">{{getUserinfo.Name}} (性别:{{getUserinfo.Gender}})
							</view>
						
			<!-- 			<view style="width: 96%;margin-bottom: 10px;font-size: 18px;">
						</view> -->
						<view style="width: 100%;flex-wrap: wrap; margin-bottom: 10px;font-size: 1.8vw;color: #5d9cec;">证件号:
						</view>
						<view style="width: 100%;flex-wrap: wrap; margin-bottom: 10px;font-size: 1.6vw;">{{getUserinfo.IdCardNo}}
						</view>
						<view style="width: 100%;margin-bottom: 10px;font-size: 1.8vw;color: #5d9cec;">准考证号:
						</view>
						<view style="width: 100%;margin-bottom: 10px;font-size: 1.6vw;">{{getUserinfo.AdmissionNo}}
						</view>
						<view style="width: 100%;margin-bottom: 10px;font-size: 1.8vw;color: #5d9cec;">开考时间: <text style='color: #000;font-size:1.6vw;'>{{getUserinfo.StartTimeStr}}</text> 
						</view>
			<!-- 			<view style="width: 100%;margin-bottom: 10px;font-size: 18px;">科目:{{getUserinfo.SubjectName}}
						</view> -->
						<view style="width: 100%;margin-bottom: 10px;font-size:1.8vw;color: #5d9cec;">结束时间:
						<text style='font-size: 1.6vw;color: #000;'>{{getUserinfo.EndTimeStr}}</text> 
						</view>
				<!-- 		<view style="width: 100%;margin-bottom: 10px;font-size: 18px;">
							考场:{{getUserinfo.ExaminationRoom}}</view>
						<view style="width: 100%;margin-bottom: 10px;font-size: 18px;">考位:{{getUserinfo.SeatNo}}</view> -->
						<view style="width: 100%;margin-bottom: 10px;font-size: 1.8vw;color: #5d9cec;">时长:
							<text style='font-size: 1.6vw;color: #000;'>{{getUserinfo.TimeLimit}}分钟</text> 
				
						</view>

					</view>
				</view>
			</view>

			<view
				style="flex:10;border-radius:1vw; background-color: #fff;overflow: hidden;margin-right: .5vw;position: relative;">
				<view style="height:9vh;background: #5d9cec;color: #fff;">
					<view
						style="width: 100%;height:100%;border-bottom: 2rpx solid #f1f3f8; height:100%;justify-content: space-between; display: flex;align-items: center;padding:0 1vw;box-sizing: border-box;">
						<view style="display: flex;align-items: center;">
							<!-- <u-icon name="edit-pen" color="#fff" size="26"></u-icon> -->
							<image  src="../../static/edit.png"  style="width: 24px;height: 24px;flex-shrink: 0;" mode=""></image>
							<view style="margin-left: 2vw; font-size: 18px
							 ;">
							试题
							</view>
						</view>
						<view style="display: flex;align-items: center;width: 15vw; justify-content: space-between;">
							<u-button text="A+" @click="addFSZ" color="#556b8d" style="width:6vw;height: 3vw;"
								size="small"></u-button>
							<u-button text="A-" @click="subFSZ" color="#556b8d" style="width:6vw;height: 3vw;"
								size="small"></u-button>
							<!-- 		<u-button text="刷新个人信息" @click="handlePop()" color="#07c160" style="width:6vw;height: 3vw;"
								size="small"></u-button> -->
							<!-- 			<u-button text="退出" @click="Ibacklogin" color="#D3D3D3" style="width:6vw;height: 3vw;color: #555555;"
								size="small"></u-button> -->
						</view>
						<!-- <u-icon name="edit-pen"  color="#ffab18" size="22"></u-icon> -->
					</view>
				</view>
				<scroll-view :scroll-y="true" :scroll-with-animation="true"
					style="height: calc(100% - 18vh);width: 100%;display: flex;align-items: flex-end;">
					<view style="height: 100%;width: 100%;padding: 2vh 2vw;box-sizing: border-box;">

						<dxtVue v-if="currentinfo.Type=='单选题'" :isNoVoice="isNoVoice" @collect="handleCollect"
							@speaker="handleSpeak" :key="currentinfo.Id" :currentinfo="currentinfo" :baseFSZ="baseFSZ">
						</dxtVue>
						<dxtsVue v-else-if="currentinfo.Type=='多选题'" :isNoVoice="isNoVoice" @collect="handleCollect"
							@speaker="handleSpeak" :key="'a'+currentinfo.Id" :currentinfo="currentinfo" :baseFSZ="baseFSZ">
						</dxtsVue>
						<pdtVue v-else-if="currentinfo.Type=='判断题'" :isNoVoice="isNoVoice" @collect="handleCollect"
							@speaker="handleSpeak" :key="'b'+currentinfo.Id" :currentinfo="currentinfo" :baseFSZ="baseFSZ">
						</pdtVue>
						<jdtVue v-else-if="currentinfo.Type=='论述题'" :isNoVoice="isNoVoice" @collect="handleCollect"
							@speaker="handleSpeak" :key="'c'+currentinfo.Id" :currentinfo="currentinfo" :baseFSZ="baseFSZ">
						</jdtVue>
						<tktVue v-else-if="currentinfo.Type=='填空题'" :isNoVoice="isNoVoice" @collect="handleCollect"
							@speaker="handleSpeak" :key="'d'+currentinfo.Id" :currentinfo="currentinfo" :baseFSZ="baseFSZ">
						</tktVue>
						<njdtVue v-else-if="currentinfo.Type=='简答题'" :isNoVoice="isNoVoice" @collect="handleCollect"
							@speaker="handleSpeak" :key="'e'+currentinfo.Id" :currentinfo="currentinfo" :baseFSZ="baseFSZ">
						</njdtVue>


						<div v-else>题目加载中，请耐心等待...</div>

					</view>
				</scroll-view>
				<view style="height:9vh;background: #5d9cec;color: #fff;position: absolute;bottom: 0;width: 100%;">
					<view
						style="width: 100%;height:100%;border-bottom: 2rpx solid #f1f3f8; height:100%;justify-content: space-between; display: flex;align-items: center;padding:0 1vw;box-sizing: border-box;">
						<view style="display: flex;align-items: center;font-size: 32rpx;">
							<!-- <u-icon name="clock" color="#fff" size="28"></u-icon> -->
						<image src="../../static/clock.png"  style="width: 24px;height: 24px;" mode=""></image>
							<countdownVue  @reminder="handleReminder" v-if='getUserinfo&&getUserinfo.TimeMinutes' :duration="getUserinfo.TimeMinutes"  @timeup='handleTimeUp' :key="getUserinfo.TimeMinutes" style="margin-left: 2vw;">
							</countdownVue>


						</view>
						<view style="display: flex;align-items: center;width: 31vw; justify-content: space-between;">
							<u-button text="上一题" @click="handleNorP('p')" :disabled="currentq==1" color="#556b8d"
								style="width:6vw;height: 3vw;" size="small"></u-button>
							<u-button text="下一题" @click="handleNorP('n')" :disabled="currentq==maxq" color="#556b8d"
								style="width:6vw;height: 3vw;" size="small"></u-button>
							<u-button text="静音" @click='stopspeaker()' color="#556b8d" style="width:6vw;height: 3vw;"
								size="small"></u-button>
							<u-button text="交卷" color="#F44336" @click="Isubmit()" style="width:6vw;height: 3vw;"
								size="small"></u-button>
						</view>
						<!-- <u-icon name="edit-pen"  color="#ffab18" size="22"></u-icon> -->
					</view>
				</view>
			</view>
			<view style="flex:4;border-radius:1vw; background-color: #fff;">
				<view style="height:9vh;">
					<view
						style="width: 100%;height:100%;border-bottom: 2rpx solid #f1f3f8; height:100%;justify-content: space-between; display: flex;align-items: center;padding:0 1vw;box-sizing: border-box;">
						<view style="display: flex;align-items: center;">
								<image src="../../static/dtk.png"  style="width: 24px;height: 24px;" mode=""></image>
							<!-- <u-icon name="file-text" color="#5d9cec" size="28"></u-icon> -->
							<view style="margin-left: 0.6vw;font-size: 16px;">
								答题卡 (共{{this.maxq}}题)
							</view>
						</view>
											<image @click="reloadCard" src="../../static/load.png"  style="width: 20px;height: 20px;flex-shrink: 0;" mode=""></image>
						<!-- <u-icon name="reload" @click="reloadCard" color="#5d9cec" size="26"></u-icon> -->
					</view>
					<scroll-view :scroll-y="true" :scroll-with-animation="true"
						style="padding: 1vh 1vw;box-sizing: border-box;padding-bottom: 18vh; height: calc(100vh - 0vh);">



						<answerCardVue v-for="(e,i) in answerCard" @chooseQ="chooseQ" @chooseId="chooseId"
							:key="e.TypeName+i" :currentq="currentq" :item="e" />
						<view v-if="answerCard.length==0"
							style="width: 20vw;height: 14vh;display: flex;align-items: center;margin: 0 auto;">
							答题卡数据加载中...
						</view>
					</scroll-view>

				</view>
			</view>

		</view>
		<u-modal :showCancelButton="true" v-if="modal.show" :show="modal.show" @confirm="handleConfirm"
			:closeOnClickOverlay="false" :title="modal.title" @close="handleClose" @cancel="handleCancel"
			:content='modal.content'></u-modal>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex';
// import plus from '@/common/plus'
	import {
		mixins
	} from "../../mixins/app.js";
	import answerCardVue from '../../components/answerCard.vue';
	import dxtVue from '../../components/dxt.vue';
	import dxtsVue from '../../components/dxts.vue';
	import pdtVue from '../../components/pdt.vue';
	import jdtVue from '../../components/jdt.vue';
	import njdtVue from '../../components/njdt.vue';
	import tktVue from '../../components/tkt.vue';
	import spopVue from '../../components/spop.vue';
	import countdownVue from '../../components/countdown.vue';
	import {
		GetQuestionSortList,
		CreateExaminationPaper,
		GetSingleQuestion,
		SubmitExam,
		PreSubmitCheck
	} from "../../api/api.js"
	// #ifdef APP-PLUS

	const TTSSpeaker = uni.requireNativePlugin('AiDrive-TTSSpeaker');
	// #endif
	export default {

		computed: {
			...mapGetters('user', ['getUserinfo']),
					uni() {
							return uni;
						}
		},

		created() {

			this.init()
			this.config = uni.getStorageSync('config')

		},
		mounted() {
			var that = this
			setTimeout(() => {
				CreateExaminationPaper().then(() => {
					GetQuestionSortList().then(res => {
						this.answerCard = res.Data
						this.maxq = this.findmax(res.Data)
						this.currentqid = res.Data[0].QList[0].Id
						this.chooseQ(res.Data[0].QList[0].SortNum)
					})
				})
				that.Agetuser()
			}, 400)
			that.Agetuser()
			// that.$refs.spop.publicHandleShow(true)
	
			setTimeout(()=>{
				setInterval(()=>{
					that.Agetuser()
				},5000)
			},1000)


		},
		components: {
			answerCardVue,
			dxtVue,
			pdtVue,
			dxtsVue,
			countdownVue,
			spopVue,
			jdtVue,
			tktVue,
			njdtVue
		},
		mixins: [mixins],
		watch: {
			currentq: {
				handler(newVal) {
					if (this.answerCard.length > 0) {
						GetSingleQuestion({
							SortNum: newVal,
							Type: 0,
						}).then(res => {
							this.currentinfo = res.Data;

						});
					} else {

					}

				},
				immediate: true, // 立即触发监听器
			}
		},
		data() {
			return {
				baseFSZ: 36,
				answerCard: [],
				currentq: 0,
				// uni:uni,
				maxq: 1,
				infoShow: false,
				currentqid: "",
				config: {},
				isNoVoice: false,
				ctimes: 3,
				currentinfo: {

				},
				modal: {
					show: false,
					type: 0,
					title: "温馨提示",
					content: "默认内容"
				},

			};
		},

		methods: {
			...mapActions('user', {
				Agetuser: 'Agetuser'
			}),
			  handleReminder(message) {
			    uni.showToast({
			      title: message,
			      icon: 'none'
			    });
			    // 或者使用其他提醒方式
			  },
			handlePop() {


				this.$refs.spop.publicHandleShow(true)


			},
			handleVoice() {
				this.isNoVoice = false
			},
			handleCollect(val) {

				GetQuestionSortList().then(res => {
					this.answerCard = res.Data
					uni.showToast({
						title: val ? '收藏成功' : '取消收藏',
						icon: 'none'
					});


				})
			},
			Ibacklogin() {
				this.modal.type = 0
				this.modal.show = true
				this.modal.content = '确定退出考试?'
				// this.$Router.replaceAll('/pages/login/login')
			},
			Isubmit() {

				PreSubmitCheck().then(res => {
					if (res.Data.length > 0) {
						this.modal.type = 1
						this.modal.show = true
						let lastNumber = res.Data.split(',')
						let s = lastNumber.slice(0, 10)
						this.modal.content =
							`您还有${lastNumber.length>10?s.toString()+`...等共${lastNumber.length}`:lastNumber.toString()}题未答，是否继续答题? `
					} else {
						this.modal.type = 3
					
						this.modal.content = '确定交卷?'
							this.modal.show = true
					}
				})


				// this.$Router.replaceAll('/pages/login/login')
			},
			handleClose(){
						this.modal.show = false
						this.ctimes = 3
			},
			handleCancel() {

				if (this.modal.type == 0) {
					this.modal.show = false
				} else if (this.modal.type == 1) {
					this.modal.show = false
					this.modal.type = 2
					setTimeout(() => {
						this.modal.content = `确定交卷?还需确认${this.ctimes}次`
						this.modal.show = true
					}, 500)
					this.ctimes = 3
				} else if (this.modal.type == 2) {
					this.modal.show = false
					this.ctimes = 3
					
				} else if (this.modal.type == 3){
					this.modal.show = false
					this.ctimes = 3
					
				}



			},

			handleConfirm() {
				// 0 退出考试 1交卷  2确认交卷三次
				if (this.modal.type == 0) {
					this.backlogin()
				} else if (this.modal.type == 1) {
					this.modal.show = false


					// this.submit()
				} else if (this.modal.type == 2) {
					if (this.ctimes > 1) {
						this.ctimes--
						this.modal.show = false
						setTimeout(() => {
							this.modal.content = `确定交卷?还需确认${this.ctimes}次`
							this.modal.show = true
						}, 500)
					} else {
					this.submit()
					this.modal.show = false
					}


				}else if (this.modal.type == 3){
					if (this.ctimes > 1) {
						this.ctimes--
						this.modal.show = false
						setTimeout(() => {
							this.modal.content = `确定交卷?还需确认${this.ctimes}次`
							this.modal.show = true
						}, 500)
					} else {
						this.submit()
					this.modal.show = false
					}
					
				}
			},
			submit() {
				var that = this
				SubmitExam().then(res => {
					if (res.Code == 100) {
						uni.showToast({
							title: '交卷成功',
							icon: "none",
							success: () => {
								that.backlogin()
							}
						})
					}
				}).finally(() => {
					this.modal.show = false
				})
			},
			backlogin() {
				// uni.clearStorageSync()
				this.$Router.replaceAll('/pages/login/login')
			},
			handleSpeak(word) {
				this.isNoVoice = false
				this.speaker(word)
			},
			findmax(arry) {

				let maxSortNum = -1;
				let maxItem = null;
				arry.forEach(type => {
					type.QList.forEach(item => {
						if (item.SortNum > maxSortNum) {
							maxSortNum = item.SortNum;
							maxItem = item;
						}
					});
				});

				return maxItem.SortNum
			},
			chooseId(id) {

				this.currentqid = id

			},
			handleTimeUp() {
  // 添加时间有效性检查
  // if (!this.getUserinfo?.EndTimeStr) {
  //   console.error('Invalid end time');
  //   return;
  // }
  
  // const remaining = new Date(this.getUserinfo.EndTimeStr) - new Date();
  // if (remaining > 30000) { // 30秒容错阈值
  //   console.warn('Premature timeup event, ignoring');
  //   return;
  // }
  if(!this.getUserinfo.NowTime||!this.getUserinfo.EndTimeStr){
	  return
  }
	  
  // uni.showToast({
	 //    title: '已自动',
	 //    icon: 'none'
  // })
      this.submit();
  // uni.showToast({
  //   title: '5s后自动交卷',
  //   icon: 'none'
  // });
  // setTimeout(() => {

  // }, 5000);
},
			getVolume() {
			      if (typeof plus === 'undefined') {
			        uni.showToast({ title: '请在真机 App 上运行', icon: 'none' });
			        return;
			      }
			
			      const volume = plus.device.getVolume();
			if(volume<0.3){
				uni.showToast({
				  title: '当前音量过小,请适当调整音量',
				  icon: 'none',
				  duration: 2000
				});
				// plus.device.setVolume(0.7)
			}
			   
			    },
			speaker(word) {
				 this.getVolume()
				// #ifdef APP-PLUS

				TTSSpeaker.speak(word, 0);
				// #endif

			},
			setspeaker() {
				// #ifdef APP-PLUS


				TTSSpeaker.setVoiceSpeed(0.8, () => {
					uni.showToast({
						title: '当前语速变慢',
						icon: "none"
					})
				});
				// #endif
			},
			stopspeaker() {
				// #ifdef APP-PLUS
				this.isNoVoice = true
				TTSSpeaker.stop();
				// #endif

			},
			handleNorP(flag) {
				if (flag == 'p') {
					this.currentq--
				} else {
					this.currentq++
				}

				this.chooseQ(this.currentq)
			},
			chooseQ(i) {

				this.currentq = i

				GetQuestionSortList().then(res => {
					this.answerCard = res.Data




				})


			},
			init() {

				// #ifdef APP-PLUS

				if (TTSSpeaker) {
					TTSSpeaker.init('');
				} else {
					console.log('初始化失败')
				}
				// #endif
				this.Agetuser()

			},

			reloadCard() {
				GetQuestionSortList().then(res => {
					this.answerCard = res.Data
					this.chooseQ(this.currentq || 1)
			


				})
			},
			addFSZ() {
				if (this.baseFSZ > 44) {
					return uni.showToast({
						icon: "none",
						title: '字体过大'
					})
				}
				this.baseFSZ += 2
			},
			subFSZ() {
				if (this.baseFSZ < 34) {
					return uni.showToast({
						icon: "none",
						title: '字体过小'
					})
				}
				this.baseFSZ -= 2
			},
		}
	}
</script>

<style lang="scss">
	.hmain {
		// border: 1px solid red;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background: #f0f3f3;
		display: flex;
		box-sizing: border-box;

	}

	::v-deep .u-button__text {
		font-size: 16px !important;
	}
</style>